<template>
  <div>
  <div class="top_img">
			<img src="../assets/10001.png" alt="" />
		</div>
		<div class="log_in">
			<div class="forms">
				<!-- 账号 -->
				<div class="tel_id">
					<div></div>
					<img src="./img/10002.png" alt="" />
					<input type="tel" id="num" placeholder="请输入账号" />
				</div>
				<!-- 密码 -->
				<div class="tel_id">
					<img src="./img/10003.png" alt="" />
					<input type="password" id="pass" placeholder="请输入密码" />
				</div>
			</div>
			<div class="register" @click="register">
				登录
			</div>
			<p class="login">没有账号？前往注册</p>

		</div>
		<div class="classifys">
			<div class="classify">
				<div class="clas_img"></div>
				<div class="clas_text"></div>
			</div>
			
		</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  // 关键：创建路由实例
  const router = useRouter()
  
  const register =() =>{
    // 现在可以使用 router 实例了
    router.push('/home')
  }
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f1f1f1;
}

.top_img {
	width: 56%;
	margin-left: 22%;
	margin-top: 70px;
}

.top_img img {
	width: 100%;
}

/* 输入框 */
.register{
	width: 100%;
	
}
.forms {
	width: 74%;

	margin-top: 20px;
	margin-left: 13%;

}
.pass::placeholder{
	color: #c3c3c3;
}
.num::placeholder{
	color: #c3c3c3;
}
.tel_id {
	width: 100%;
	margin-bottom: 15px;
	height: 40px;
	display: flex;

	align-items: center;
	border-radius: 60px;
	border: #aeaeae 1px solid;
}

.tel_id img {
	margin-left: 10px;
	height: 70%;
	display: block;

}

.tel_id input {
	height: 80%;
	width: 80%;
	outline: none;
	border: none;
	display: block;
	background-color: #f1f1f1;
}

/* 登录按钮 */
.register {
	width: 74%;
	height: 40px;
	color: white;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	border-radius: 40px;
	margin-top: 30px;
	margin-left: 13%;
	background-color: #ff8d1a;
	letter-spacing: 10px;
}

.login {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	font-size: 12px;
	color: #aaaaaa;
}

/* 最下方图文 */
.else {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
	
	
}

.else_text {
	font-size: 13px;
	color: #aaaaaa;
	
	margin-right: 15PX;
}

.else_img {
	width: 30px;
	height: 30px;
}

.else_img img {
	width: 100%;
	height: 100%;
}
/* 提示弹窗 */
.suc {
	width: 22%;
	height: 35px;
	background-color: #f0f9eb;
	position: fixed;
	text-align: center;
	line-height: 35px;
	border-radius: 8px;
	display: none;
	
	top: 5%;
	left: 39%;
	border: 1px solid #67c23a;
	color: #70d33f;
}

.err {
	padding: 5px;
	height: 25px;
	background-color: #fef0f0;
	position: fixed;
	text-align: center;
	line-height: 25px;
	border-radius: 8px;
	display: none;
	
	top: 5%;
	left: 37%;
	border: 1px solid #f56d6d;
	color: #f67979;
}
/* 注册弹窗 */
.enroll{
	display: none;
	width: 100%;
	background-color: #f1f1f1;

}
/* 注册按钮 */
.registers {
	width: 74%;
	height: 40px;
	color: white;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	border-radius: 40px;
	margin-top: 30px;
	margin-left: 13%;
	background-color: #2a82e4;
	letter-spacing: 10px;
}
.passw::placeholder{
	color: #c3c3c3;
}
</style>